<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="import" href="../bower_components/polymer/polymer.html">
</head>
<body>
  <my-blink interval="1000">Testing</my-blink>
  <my-blink interval=300>Blah blah blah</my-blink>

  <script>
    Polymer({
      is: 'my-blink',

      toggleBlink: function() {
        this.style.visibility = this.style.visibility === '' ? 'hidden' : '';
      },

      attached: function() {
        var interval = this.getAttribute('interval') || 500;
        this.intervalId = setInterval(this.toggleBlink.bind(this), interval);
      },

      detached: function() {
        clearInterval(this.intervalId);
        this.intervalId = undefined;
      },

      attributeChangedCallback: function(attr, oldVal, newVal) {
        clearInterval(this.intervalId);
        var interval = newVal || 500;
        this.intervalId = setInterval(this.toggleBlink.bind(this), interval);
      }
    });
  </script>
</body>
</html>
